<template>
	<view class="musicHead-container" :style="{color:textColor}" >
		<view class="head-icon" v-if="isShow" :class="{'icon-Black': iconBlack}">
			<text class="iconfont icon-zuojiantou" @tap="toBack"></text>
			|
			<text class="iconfont icon-shouye" @tap="toHome"></text>
		</view>
		<view class="head-title">
			{{title}}
		</view>
		
	</view>
</template>

<script>
	import "@/common/iconfont.css"
	export default {
		name:"MusicHead",
		props:{
			title: {
				type: String,
				default: ''
			},
			isShow:{
				type: Boolean,
				default: true
			},
      iconBlack:{
        type: Boolean,
        default: false
      },
			// bgcolor:{
			// 	type:String,
			// 	default:"#fff"
			// },
			textColor:{
				type:String,
				default:'#000'
			}
		},
		data() {
			return {};
		},
		methods:{
			// 返回上一级
			toBack(){
				uni.navigateBack();
			},
			// 回到首页
			toHome(){
				uni.navigateTo({
					url:"/pages/index/index"
				})
			}
		}
	}
</script>

<style scoped>
 .musicHead-container{
	 box-sizing: border-box;
	 width: 100%;
	 height: 150rpx;
	 padding-top: 92rpx;
	 /* background-color: #4CD964; */
	 font-size: 32rpx;
	 /* line-height: 150px; */
	 text-align: center;
	 position: relative;
 }
 .head-icon{
	 display: flex;
	 justify-content: space-evenly;
	 position: absolute;
	 left: 16rpx;
	 top: 92rpx;
	 width: 180rpx;
	 line-height: 60rpx;
	 border-radius: 30rpx;
	 background-color: rgba(0,0,0,.3);
	 color: #fff;
 }
 .head-title{
	 line-height: 60rpx;
 }
 .icon-Black{
   color: black !important;
   background-color: #fff;
   border: 2rpx solid #eee;
 }
</style>
